<template>
  <div class="box">
    <div v-for="(item, index) in tenementNumber" :key="index" class="cardUl">
      <div class="tennatStat">
        <div class="cardName">{{ $t('Tenant.totalNumbers') }}</div>
        <div class="tennatNum">{{ item.totalNumbers || 0 }}</div>
      </div>
      <div class="tennatStat">
        <div class="cardName">{{ $t('Tenant.monthAddNumbers') }}</div>
        <div class="tennatNum">{{ item.monthAddNumbers || 0 }}</div>
      </div>
      <div class="tennatStat">
        <div class="cardName">{{ $t('Tenant.enableNumbers') }}</div>
        <div class="tennatNum">{{ item.enableNumbers || 0 }}</div>
      </div>
    </div>

    <SearchForm
      class="searchForm"
      :modal-keys="modalKeys"
      :modal-key="modalKey"
      @onShowEdit="onShowEdit"
    />
    <Rtable
      :url="url"
      :line-height="41"
      :conditions="conditions"
      :columns="columns"
      :size="size"
    />

    <EditTenement
      :visible="modalKey === modalKeys.edit"
      @onClose="onHide"
      @onOk="onSubmitEdit"
    />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import SearchForm from './components/SearchForm'
import Rtable from '@/components/r-table'
import EditTenement from './components/EditTenement'
import url from '@/api/url'

export default {
  components: {
    SearchForm,
    Rtable,
    EditTenement
  },
  data() {
    return {
      url: url.tenementPage,
      modalKeys: {
        edit: 'edit'
      }
    }
  },
  computed: {
    ...mapState('tenement', [
      'conditions',
      'size',
      'tenementNumber',
      'detailList'
    ]),
    ...mapGetters(['modalKey', 'modalData']),
    columns() {
      return [
        {
          label: this.$t('Tenant.tenantName'),
          prop: 'name',
          
        },
        {
          label: this.$t('Tenant.tableCompanyNames'),
          prop: 'companyNames',
          
        },
        {
          label: this.$t('Tenant.mobile'),
          prop: 'mobile',
          
        },
        {
          label: this.$t('Tenant.userNums'),
          prop: 'userNums',
          
        },
        {
          label: this.$t('Tenant.tenantStatus'),
          prop: 'tenantStatus',
          
          width: 70,
          operates: [
            {
              el: 'switch',
              prop: 'tenantStatus',
              props: {
                'active-value': 0,
                'inactive-value': 1
              },
              opEvent: this.changeStatus
            }
          ]
        },
        {
          label: this.$t('Tenant.createdDate'),
          prop: 'createdDate'
        },
        {
          label: this.$t('Tenant.operation'),
          prop: 'operation',
          
          width: 80,
          operates: [
            {
              el: 'button',
              text: this.$t('btns.edit'),
              opEvent: this.onShowEdit
            }
            // {
            //   el: 'button',
            //   props: {
            //     type: 'text'
            //   },
            //   text: '删除',
            //   opEvent: this.onDelTenant,
            // }
          ]
        }
      ]
    }
  },
  mounted() {
    this.$store.dispatch('tenement/getTenementNumber')
  },
  methods: {
    // 编辑 新增
    onShowEdit(row = {}) {
      this.$store
        .dispatch('tenement/getTenementDatil', { id: row.id })
        .then(isSucess => {
          const newDetailList = { ...this.detailList, ...row }
          this.$store.dispatch('showModal', {
            modalKey: this.modalKeys.edit,
            modalData: newDetailList
          })
        })
    },
    // 隐藏
    onHide() {
      this.$store.dispatch('hideModal')
    },
    onSubmitEdit(data) {
      this.$store.dispatch('onEditTenement', data)
    },
    // 修改status
    changeStatus(e, row) {
      const { id, tenantStatus } = row
      this.$store.dispatch('tenement/editTenementStatus', {
        id,
        tenantStatus: Number(Boolean(!Number(tenantStatus)))
      })
      row.tenantStatus = e
    },
    onDelTenant(e) {
      const { id } = e
      this.$store.dispatch('tenement/delData', { id })
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  background-color: #fff;
  padding: 25px;
  .cardUl {
    display: flex;
    justify-content: space-between;
    .tennatStat {
      width: 30%;
      background-color: #f7f8fa;
      height: 100px;
      .cardName {
        display: inline-block;
        margin: 3% 6%;
        font-size: 13px;
        color: #504949;
      }
      .tennatNum {
        margin-top: 6px;
        color: #3e3b3b;
        font-size: 24px;
        text-align: center;
        font-weight: 600;
      }
    }
  }
  .searchForm {
    float: left;
    margin-top: 20px;
  }
}
</style>
